import { onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts";

export default function usePieChart(data) {
  let myChart = null;

  let chartDom = null;

  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      top: "center",
      right: "5%",
    },
    series: [
      {
        name: "人数",
        type: "pie",
        right: "40%",
        radius: ["40%", "80%"],
        avoidLabelOverlap: false,
        // itemStyle: {
        //   borderRadius: 10,
        //   borderColor: "#fff",
        //   borderWidth: 2,
        // },
        label: {
          show: false,
          position: "center",
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: "20",
        //     fontWeight: "bold",
        //   },
        // },
        labelLine: {
          show: false,
        },
        // data: [
        //   { value: 8, name: "迟到" },
        //   { value: 30, name: "已签到" },
        //   { value: 10, name: "未签到" },
        // ],
        data: data,
      },
    ],
  };

  onMounted(() => {
    chartDom = document.getElementById("myChart");

    myChart = echarts.init(chartDom);
    myChart.setOption(option);
  });

  watch(data, () => {
    if (myChart) {
      myChart.dispose();
    }
    myChart = echarts.init(chartDom);
    myChart.setOption(option);
  });

  onBeforeUnmount(() => {
    myChart.dispose();
  });
}
